import React,{useEffect, useState} from "react";
import {useSelector} from "react-redux";
import ContentLayout from "../../components/layout/ContentLayout";
import { Pagination, Table, Input, Tag} from "antd";
import './comment.css'
import {useTableData} from "../../hooks/table/useTableData";
import { useCommentBtns } from './hooks/useCommentBtns'
const { Search } = Input
const Comment = () => {
    const onSearch = searchVal => {
        setAjaxData({
            ...ajaxData,
            comment_content: searchVal
        })
    }
    const { role } = useSelector(state => state.user.userData)
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            align: 'center',
        },
        {
            title: '评论人',
            dataIndex: 'comment_user_name',
            align: 'center',
        },
        {
            title: '评论人邮箱',
            dataIndex: 'comment_user_email',
            align: 'center',
        },
        {
            title: '评论内容',
            dataIndex: 'comment_content',
        },
        {
            title: '评论时间',
            dataIndex: 'comment_date',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'comment_status',
            render: status => <Tag color={ status ? 'green': 'volcano' }>{ status ? '可见' : '屏蔽' }</Tag>
        },
        {
            title: '操作',
            width: 150,
            align: 'center',
            render: (_,row) => {
                return role ? commentBtns(row) : <div />
            }
        }
    ]
    const [tableData, setTableData] = useState([])
    const [ ajaxData, setAjaxData  ] = useState({
        page: 1,
        limit: 10,
        comment_content: '',
    })
    // const navigate = useNavigate()
    const [ total,setTotal ] = useState(0)
    const { getTableData, loading } = useTableData({ tableUrl: '/comment/query',setTableData,setTotal })
    const { commentBtns } = useCommentBtns(getTableData)
    useEffect(() => {
        getTableData(ajaxData)
    },[ajaxData])
    const handleChangePagination = (page,pageSize) => {
        setAjaxData( {
            page,
            limit:pageSize
        })
    }
    return (
        <div style={{ height: '100%',width: '100%' }}>
            <ContentLayout
                searchComp={
                    <div  className="comment-top-bar">
                        <div className="search">
                            <Search placeholder="评论" onSearch={onSearch} enterButton />
                        </div>
                    </div>
                }
                mainComp={
                    <Table rowKey={'comment_id'} loading={loading}  pagination={false} columns={columns} dataSource={tableData} />
                }
                footerComp={
                    <Pagination
                        onChange={handleChangePagination}
                        defaultCurrent={ajaxData.page}
                        showSizeChanger
                        showTotal={(total) => `总计 ${total}条`}
                        total={total} />
                }
            />
        </div>
    )
}

export default Comment
